import React from 'react';
import { View, Text, TouchableOpacity, StyleSheet } from 'react-native';

const NumberSelector = ({ onSelectedNum }) => {
    return (
        <View style={styles.container}>
            {[1, 2, 3, 4, 5, 6, 7, 8, 9].map(number => (
                <TouchableOpacity 
                    key={number} 
                    onPress={() => onSelectedNum(number)} 
                    style={styles.button}
                >
                    <Text style={styles.text}>{number}</Text>
                </TouchableOpacity>
            ))}
        </View>
    );
};

const styles = StyleSheet.create({
    container: {
        flexDirection: 'row',
        flexWrap: 'wrap',
        width: 120,
        height: 120,
    },
    button: {
        width: 40,
        height: 40,
        borderWidth: 1,
        borderColor: 'transparent',
        backgroundColor: '#ADD8E6',
        justifyContent: 'center',
        alignItems: 'center',
    },
    text: {
        fontSize: 25,
    },
});

export default NumberSelector;